<template>
	<view class="container">
		<view class="title">
			<view class="block"></view>
			<view class="text">联系客服</view>
		</view>
		<view class="main">
			<view class="lxservice" @tap="service">点击联系客服</view>
			<!-- <view class="text">如点击无法联系，长按下方二维码添加客服微信</view>
			<image class="serviceimg"></image> -->
		</view>
		<view class="title">
			<view class="block"></view>
			<view class="text">意见反馈</view>
		</view>
		<view class="fill">
			<view class="fill_text">联系人</view>
			<input class="inputone" v-model="name" placeholder="您的称呼" />
			<view class="fill_text">联系方式</view>
			<input class="inputone" v-model="phone" placeholder="请填写您的联系方式" />
			<view class="fill_text">请填写意见或投诉内容</view>
			<textarea class="input" v-model="inputtext" placeholder="请填写您想要反馈的意见或者投诉内容"></textarea>
			<view class="fill_text">上传图片（选填）</view>
			<view class="upimgs">
				<jade-image-upload
					:list="media"
					:control="control"
					:maxCount="maxCount"
					:compressSize="compressSize"
					:compressQuality="compressQuality"
					:compressWidth='compressWidth'
					:imageSize="imageSize"
					@chooseFile="chooseFile"
					@imgDelete="mediaDelete">
					</jade-image-upload>
			</view>
			<view class="buttom" @tap="feedback">反馈提交</view>
		</view>
	</view>
</template>		

<script>
import { onGotApiData } from '../../utils/api.js';
	export default {
		data() {
			return {
				userId:'',
				name:'',
				phone:'',
				inputtext:'',
				servicevalue:{}, //客服的信息
				//以下是上传图片变量
				control: true,
				maxCount: 3,
				compressSize: 0.2,
				imageSize: 12,
				compressQuality: 0.8,
				compressWidth: 750,
				uploadTask: null,
				media: [], //数据源
			}
		},
		// 获取首页基础信息
		onLoad(options) {
			this.userId = uni.getStorageSync('dysx_userId')||''
			this.phone = uni.getStorageSync('dysx_phone')||''
			// 获取客服
			this.getservice()
		},
		// 页面初次渲染完成时执行的代码
		onReady() {

		},
		// 页面卸载时触发
		onUnload() {

		},
		// 页面隐藏时触发
		onHide() {

		},
		methods: {
			// 获取客服
			getservice(){
				let params = {
				}
				onGotApiData('/wxxcx_api/kf/get','GET',params,this.service_value)
			},
			// 客服信息结果
			service_value(result){
				console.log('result',result)
				if(result.code == 200){
					this.servicevalue = result.data
				}
			},
			// 点击联系客服
			service() {
				const that = this
				// window.location.href = 'https://work.weixin.qq.com/kfid/kfc57df3bacfa1fd3f9'
			wx.openCustomerServiceChat({
				extInfo: {url: `${that.servicevalue.kf_link}`},
				corpId: that.servicevalue.corpId,
				success(res) {
					console.log("我是客服",res)
				},
				fail(res){ 
					console.log("我是失败客服",res)
				}
			})
			},
				//上传
			chooseFile(e) {
				console.log('上传图片返回1',e[0])
				this.uploadFileToServe(e[0])

			},
			//中断上传并删除
			mediaDelete(e) {
				this.uploadTask ? this.uploadTask.abort() : ''
				this.media.splice(e,1)
				console.log('this.media',this.media)
			},
			//上传逻辑处理
			uploadFileToServe(urlList) {
				if (!urlList || urlList.length <= 0) {
					return
				};
				this.uploadTask = uni.uploadFile({
					url: 'https://dysx-api.ksbmtb.com:8889/file/upload_img',
					filePath: urlList.src,
					name: 'file',
					success: (res) => {
						// console.log('上传图片返回2',res)
						let data = JSON.parse(res.data) 
						if (!data.data.url) {
							urlList.status = 'error'
							urlList.progress = '上传失败'
						} else {  
							urlList.status = 'success'
							urlList.progress = '上传成功'
							urlList.src = data.data.url
						}
					}
				});
				this.uploadTask.onProgressUpdate((res) => {
					urlList.percent = res.progress
					this.media.splice(urlList.index,1,urlList)
				})
				// console.log('上传图片返回3',this.uploadTask)
				console.log('上传图片返回4',this.media)
			},
			// 提交反馈`
			feedback(){
				if(this.name== ''|| this.phone == ''){
					return uni.showToast({
						title: '请输入联系人/联系方式',
						icon: 'none',
						//显示持续时间为 2秒
						duration: 2000
					})
				}
				let newStr = ''
				this.media.forEach((item,index)=>{
					if(newStr!=''){
						newStr = newStr + "," + item.src
					}else{
						newStr = item.src
					}
				})

				let params = {
					name:this.name,
					phone:this.phone,
					content:this.inputtext,
					imgs: newStr,
				}
				onGotApiData('/wxxcx_api/mine/v1/feedback','POST',params,this.feedback_value)
			},
			// 会员信息结果
			feedback_value(result){
				console.log('result',result)
				if(result.code == 200){
					this.media = []
					this.inputtext = ''
					 uni.showToast({
						title: '反馈成功',
						icon: 'none',
						//显示持续时间为 2秒
						duration: 2000
					})
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	.container {
		width: 100vw;
		max-width: 750rpx;
		min-height: 100vh;
		margin: 0 auto;
		padding: 10rpx 0 0 0;
		overflow: auto;
		font-family: '思源黑体';	
		.title{
			width: 750rpx;
			height: 60rpx;
			// padding-top: 20rpx;
			margin: 0 auto;
			display: flex;
			.block{
				width: 8rpx;
				height: 32rpx;
				background-color: rgba(15, 74, 252, 1);
				margin: 14rpx 0 0 20rpx;
				border-radius: 4rpx;
			}
			.text{
				width: 600rpx;
				height: 60rpx;
				font-size: 32rpx;
				font-weight: 700;
				line-height: 60rpx;
				color: rgba(0, 0, 0, 1);
				margin: 0 0 0 12rpx;
			}
		}  
		.main{
			width: 730rpx;
			// height: 560rpx;
			padding: 50rpx 0;
			border-radius: 20rpx;
			margin: 0 auto;
			margin-top: 10rpx;
			margin-bottom: 10rpx;
			background: rgba(255, 255, 255, 1);
			.lxservice{
				width: 600rpx;
				height: 100rpx;
				border-radius: 60rpx;
				margin: 0 auto;
				background: linear-gradient(90deg, rgba(76, 108, 252, 1) 0%, rgba(3, 49, 255, 1) 100%);
				box-shadow: 0px 8px 5px  rgba(0, 0, 0, 0.25);
				font-size: 40rpx;
				line-height: 100rpx;
				color: rgba(255, 255, 255, 1);
				text-align: center;
			}
			.text{
				width: 620rpx;
				height: 40rpx;
				font-size: 28rpx;
				line-height: 40rpx;
				margin: 0 auto;
				margin-top: 40rpx;
				color: rgba(0, 0, 0, 1);
				text-align: center;
			}
			.serviceimg{
				width: 320rpx;
				height: 320rpx;
				margin: 20rpx 205rpx;
				border: 1px solid black;
			}
		}
		.fill{
			width: 730rpx;	
			// height: 760rpx;
			border-radius: 20rpx;
			padding: 40rpx 0;
			margin: 0 auto;
			margin-top: 10rpx;
			background: rgba(255, 255, 255, 1);
			.fill_text{
				width: 700rpx;
				height: 50rpx;
				font-size: 28rpx;
				font-weight: 500;
				line-height: 50rpx;
				margin: 0 auto;
				color: rgba(46, 46, 46, 1);
			}
			.upimgs{
				width: 660rpx;
				height: 200rpx;
				// padding: 10rpx 0;
				margin: 0 auto;
				margin-top : 20rpx;
				margin-bottom: 20rpx;
				// border: 1px solid black;
				display: flex;
				.imgitem{
					width: 150rpx;
					height: 150rpx;
					margin: 25rpx 20rpx 0 0;
					// background-color: pink;
					position: relative;
					.itemimg{
						width: 150rpx;
						height: 150rpx;
					}
					.cha{
						width: 32rpx;
						height: 32rpx;
						position: absolute;
						top: -6rpx;
						left: 130rpx;
					}
					.progress{
						width: 100rpx;
						height: 20rpx;
						border: 1px solid black;
					}
				}
				::v-deep .column-three{
					width: 180rpx;
					height: 180rpx;
				}
			}
			.inputone{
				width: 660rpx;
				height: 30rpx;
				border-radius: 10rpx;
				padding: 20rpx;
				margin: 0 auto;
				margin-top: 16rpx;
				margin-bottom: 30rpx;
				background: rgba(242, 242, 242, 1);
				font-size: 28rpx;
			}
			.input{
				width: 640rpx;
				height: 120rpx;
				border-radius: 16rpx;
				padding: 30rpx;
				margin: 0 auto;
				margin-top: 16rpx;
				margin-bottom: 30rpx;
				background: rgba(242, 242, 242, 1);
				font-size: 28rpx;
			}
			/* 设置placeholder的字体样式 */
			textarea::placeholder {
				color: #999; /* 设置颜色 */
				font-size: 28rpx; /* 设置字体大小 */
			}
			.imgs{
				width: 700rpx;
				height: 200rpx;
				margin: 0 auto;
				margin-top: 10rpx;
				margin-bottom: 40rpx;
				// border: 1px solid black;
				display: flex;
				.upimg{
					width: 180rpx;
					height: 180rpx;
					border-radius: 10rpx;
					margin: 10rpx;
					background: rgba(242, 242, 242, 1);
				}
			}
			.buttom{
				width: 670rpx;
				height: 100rpx;
				border-radius: 10rpx;
				background: rgba(255, 87, 51, 1);
				font-size: 40rpx;
				margin:  0 auto;
				line-height: 100rpx;
				color: rgba(255, 255, 255, 1);
				text-align: center;
			}
		}
	}
</style>
